<template>
  <view class="appointments-page">
    <view class="header">
      <view class="back-btn" @tap="goBack">
        <text>&lt;</text>
      </view>
      <text class="page-title">养老院预约记录</text>
    </view>
    
    <view class="content">
      <view v-if="appointments.length === 0" class="empty-state">
        <image class="empty-image" src="../../../static/empty.png" mode="aspectFit"></image>
        <text class="empty-text">暂无养老院预约记录</text>
        <view class="action-btn" @tap="goToNursingHomes">
          <text>去预约养老院</text>
        </view>
      </view>
      
      <view v-else class="appointments-list">
        <view 
          class="appointment-item" 
          v-for="(item, index) in appointments" 
          :key="index"
        >
          <view class="item-header">
            <text class="nursing-home-name">{{ item.nursingHomeName }}</text>
            <text :class="['status-tag', getStatusClass(item.status)]">{{ getStatusText(item.status) }}</text>
          </view>
          
          <view class="item-info">
            <view class="info-row">
              <text class="info-label">预约时间：</text>
              <text class="info-value">{{ item.appointmentTime }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">预约地点：</text>
              <text class="info-value">{{ item.address }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">预约人：</text>
              <text class="info-value">{{ item.appointee }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">联系电话：</text>
              <text class="info-value">{{ item.phone }}</text>
            </view>
            <view class="info-row" v-if="item.remark">
              <text class="info-label">备注：</text>
              <text class="info-value">{{ item.remark }}</text>
            </view>
          </view>
          
          <view class="item-actions">
            <view class="action-btn primary" @tap="viewNursingHomeDetail(item.nursingHomeId)">
              <text>查看养老院</text>
            </view>
            <view 
              class="action-btn" 
              @tap="cancelAppointment(item.id)" 
              v-if="item.status === 'pending'"
            >
              <text>取消预约</text>
            </view>
            <view 
              class="action-btn" 
              @tap="evaluateAppointment(item.id, item.nursingHomeId)" 
              v-if="item.status === 'completed' && !item.evaluated"
            >
              <text>评价</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 预约记录列表
const appointments = ref([
  {
    id: 1,
    nursingHomeId: 1,
    nursingHomeName: '阳光养老院',
    appointmentTime: '2023-07-15 14:30',
    address: '北京市海淀区西三旗建材城西路88号',
    appointee: '张三',
    phone: '13812345678',
    remark: '希望了解一下养老院的环境和服务',
    status: 'completed',
    evaluated: true
  },
  {
    id: 2,
    nursingHomeId: 2,
    nursingHomeName: '康福养老中心',
    appointmentTime: '2023-08-20 10:00',
    address: '北京市朝阳区建国路18号',
    appointee: '张三',
    phone: '13812345678',
    remark: '',
    status: 'pending',
    evaluated: false
  }
]);

// 页面加载时执行
onMounted(() => {
  // 实际应用时，这里应该从API加载预约记录
  loadAppointments();
});

// 加载预约记录
const loadAppointments = () => {
  // 这里应该调用API获取预约记录
  console.log('加载养老院预约记录');
  
  // 模拟加载后的数据已预设在appointments中
};

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    'pending': '待参观',
    'completed': '已完成',
    'canceled': '已取消'
  };
  return statusMap[status] || status;
};

// 获取状态对应的样式类名
const getStatusClass = (status) => {
  const statusClassMap = {
    'pending': 'status-pending',
    'completed': 'status-completed',
    'canceled': 'status-canceled'
  };
  return statusClassMap[status] || '';
};

// 查看养老院详情
const viewNursingHomeDetail = (id) => {
  uni.navigateTo({
    url: `/pages/nursing-home-detail/index?id=${id}`
  });
};

// 取消预约
const cancelAppointment = (id) => {
  uni.showModal({
    title: '提示',
    content: '确定要取消此次预约吗？',
    success: (res) => {
      if (res.confirm) {
        // 这里应该调用API取消预约
        console.log('取消预约，ID：', id);
        
        // 模拟取消成功
        const index = appointments.value.findIndex(item => item.id === id);
        if (index !== -1) {
          appointments.value[index].status = 'canceled';
        }
        
        uni.showToast({
          title: '已取消预约',
          icon: 'success'
        });
      }
    }
  });
};

// 评价预约
const evaluateAppointment = (id, nursingHomeId) => {
  uni.navigateTo({
    url: `/pages/profile/reviews/create?appointmentId=${id}&nursingHomeId=${nursingHomeId}`
  });
};

// 前往养老院列表
const goToNursingHomes = () => {
  uni.switchTab({
    url: '/pages/index/index'
  });
};

// 返回上一页
const goBack = () => {
  uni.navigateBack({
    delta: 1
  });
};
</script>

<style lang="scss">
.appointments-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  
  .header {
    display: flex;
    align-items: center;
    height: 50px;
    background-color: #fff;
    padding: 0 15px;
    position: relative;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
    
    .back-btn {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10;
      
      text {
        font-size: 24px;
        font-weight: bold;
        color: #2c7873;
      }
    }
    
    .page-title {
      position: absolute;
      left: 0;
      right: 0;
      text-align: center;
      font-size: 18px;
      font-weight: 600;
      color: #2c7873;
    }
  }
  
  .content {
    padding: 15px;
    
    // 空状态
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 50px 0;
      
      .empty-image {
        width: 120px;
        height: 120px;
        margin-bottom: 15px;
      }
      
      .empty-text {
        font-size: 16px;
        color: #999;
        margin-bottom: 20px;
      }
      
      .action-btn {
        padding: 10px 20px;
        background-color: #2c7873;
        color: #fff;
        border-radius: 20px;
        font-size: 14px;
      }
    }
    
    // 预约记录列表
    .appointments-list {
      .appointment-item {
        background-color: #fff;
        border-radius: 10px;
        padding: 15px;
        margin-bottom: 15px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        
        .item-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-bottom: 10px;
          border-bottom: 1px solid #f0f0f0;
          margin-bottom: 10px;
          
          .nursing-home-name {
            font-size: 16px;
            font-weight: 600;
            color: #333;
          }
          
          .status-tag {
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 12px;
            
            &.status-pending {
              background-color: #e3f2fd;
              color: #1976d2;
            }
            
            &.status-completed {
              background-color: #e8f5e9;
              color: #388e3c;
            }
            
            &.status-canceled {
              background-color: #ffebee;
              color: #d32f2f;
            }
          }
        }
        
        .item-info {
          margin-bottom: 15px;
          
          .info-row {
            display: flex;
            margin-bottom: 8px;
            
            &:last-child {
              margin-bottom: 0;
            }
            
            .info-label {
              width: 80px;
              font-size: 14px;
              color: #666;
            }
            
            .info-value {
              flex: 1;
              font-size: 14px;
              color: #333;
            }
          }
        }
        
        .item-actions {
          display: flex;
          justify-content: flex-end;
          
          .action-btn {
            padding: 6px 12px;
            border-radius: 15px;
            font-size: 13px;
            margin-left: 10px;
            background-color: #f5f5f5;
            color: #666;
            
            &.primary {
              background-color: #2c7873;
              color: #fff;
            }
          }
        }
      }
    }
  }
}
</style> 